<div class='editable-page-model'>
<form>
    <div class="model-item-list">
    {foreach name='editable_page_model_list' item='model_item'}    
    <label class='model-item-wrapper' data-show="0">
        <div class='model-item' title="{$model_item.editable_page_model_intro}">
            <div class='model-image' data-action="add" data-id="{$model_item.editable_page_model_id}"><img src='{$Think.UPLOAD_SITE_URL}/home/common/editable-page-model-{if $Request.param.type}{$Request.param.type}-{/if}{$model_item.editable_page_model_id}.jpg'></div>
            <div class='model-name'>{$model_item.editable_page_model_name}</div>
        </div>
    </label>
    {/foreach}
    </div>
    <div class="clear"></div>
</form>
</div>

<script>
    function submit_model_add(model_id,config_id){
        if(!model_id){
            layer.msg('{$Think.lang.model_id_empty}')
            return
        }
        addEditableModel(model_id,config_id)
    }
    function show_page(l,p){
        $('.model-item-wrapper').attr('data-show',0)
        $('#current_model_page').text(p)
        for(var i=0;i<l;i++){
            $('.model-item-wrapper').eq(i+(p-1)*4).attr('data-show',1)
        }
    }
    $(function(){
        $('.model-item-wrapper .model-image').draggable({
            connectToSortable: ".edit-mode",
            helper: "clone",
            revert: "invalid",
            scroll:false,
            start:function(event, ui ){
                $('.model-list').removeClass('scroll')
            },
            stop:function(){
                $('.model-list').addClass('scroll')
            }
        })
    })
</script>
